<script lang="tsx" setup>
import { nextTick, ref, watch } from "vue"
import { definePageModel, PageModel } from "@/frame/view/layout/page-model/constructor.ts"
import APIS from "@/apis"
import { getCode } from "@/utils/get-code.ts"
import { CodeRuleTypeEnum } from "@/utils/enum.ts"
import { ElMessage, ElMessageBox } from "element-plus"
import { processRequest } from "@/frame/apis/request"
import StaffModel from "../../StaffModel.ts"
import { deleteMultiUrl, disableMultiUrl, enableMultiUrl } from "@/utils/base-url.ts"

/**
 * 定义prop
 */
const props = defineProps<{
  /**
   * 部门节点id
   */
  nodeId: string
}>()

/**
 * 页面基础
 */
const pageModelRef = ref()
const config = definePageModel<StaffModel>({
  url: APIS.STAFF_BASE,
  otherParams: {
    departmentId: undefined
  },
  searchForm: {
    els: [
      {
        eType: "el-input",
        prop: "code",
        props: {
          placeholder: "员工编码",
          clearable: true
        }
      },
      {
        eType: "el-input",
        prop: "name",
        props: {
          placeholder: "员工名称",
          clearable: true
        }
      },
      {
        eType: "el-input",
        prop: "contact",
        props: {
          placeholder: "联系方式",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      },
      {
        label: "删除",
        eType: "el-button",
        props: {
          type: "danger"
        },
        event: "delete-multi"
      },
      {
        label: "启用",
        eType: "el-button",
        props: {
          type: "success"
        },
        event: "enable"
      },
      {
        label: "禁用",
        eType: "el-button",
        props: {
          type: "danger"
        },
        event: "disable"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    selection: true,
    operation: {
      width: 100,
      props: {
        fixed: "right"
      },
      els: [
        {
          eType: "el-button",
          label: "编辑",
          event: "edit",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "删除",
          event: "delete",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        }
      ]
    },
    props: {
      stripe: true,
      border: true
    },
    els: [
      {
        label: "员工编码",
        prop: "code",
        minWidth: 120
      },
      {
        label: "员工姓名",
        prop: "name",
        minWidth: 120
      },
      {
        label: "员工性别",
        prop: "sex",
        minWidth: 120
      },
      {
        label: "员工年龄",
        prop: "age",
        minWidth: 120
      },
      {
        label: "员工账号",
        prop: "account",
        minWidth: 120
      },
      {
        label: "员工生日",
        prop: "birthday",
        minWidth: 160
      },
      {
        label: "联系方式",
        prop: "contact",
        minWidth: 120
      },
      {
        label: "微信号",
        prop: "wechat",
        minWidth: 120
      },
      {
        label: "邮箱",
        prop: "email",
        minWidth: 120
      },
      {
        label: "是否启用",
        prop: "isEnable",
        minWidth: 120,
        renderFn(data) {
          return <span>{data.isEnable ? "启用" : "禁用"}</span>
        }
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 160
      }
    ]
  },
  form: {
    title: "新增/编辑",
    width: 500,
    sheetForm: {
      async bindData(data: any) {
        if (!data?.id) {
          data.code = await getCode(CodeRuleTypeEnum.员工管理表)
        }
        return data
      },
      async beforeSubmit(data: any) {
        if (!data?.id) {
          data.isEnable = true
        }
        return data
      },
      labelWidth: "100px",
      els: [
        {
          label: "员工编码",
          eType: "el-input",
          prop: "code",
          renderFn(data) {
            return <span>{data.code}</span>
          }
        },
        {
          label: "员工姓名",
          eType: "el-input",
          prop: "name",
          props: {
            placeholder: "员工姓名",
            clearable: true
          }
        },
        {
          label: "员工性别",
          eType: "el-input",
          prop: "sex",
          props: {
            placeholder: "员工性别",
            clearable: true
          }
        },
        {
          label: "员工年龄",
          eType: "el-input",
          prop: "age",
          props: {
            placeholder: "员工年龄",
            clearable: true
          }
        },
        {
          label: "员工账号",
          eType: "el-input",
          prop: "account",
          props: {
            placeholder: "员工账号",
            clearable: true
          }
        },
        {
          label: "员工密码",
          eType: "el-input",
          prop: "password",
          props: {
            placeholder: "员工密码",
            clearable: true
          }
        },
        {
          label: "员工联系方式",
          eType: "el-input",
          prop: "contact",
          props: {
            placeholder: "员工联系方式",
            clearable: true
          }
        },
        {
          label: "员工微信号",
          eType: "el-input",
          prop: "wechat",
          props: {
            placeholder: "员工微信号",
            clearable: true
          }
        },
        {
          label: "员工邮箱",
          eType: "el-input",
          prop: "email",
          props: {
            placeholder: "员工邮箱",
            clearable: true
          }
        }
      ]
    }
  }
})

/**
 * 刷新表格
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

/**
 * 新增
 */
const handleAdd = () => {
  pageModelRef.value.handleAdd()
}

/**
 * 编辑
 */
const handleEdit = (row: any) => {
  pageModelRef.value.handleEdit(row)
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 删除 - 批量
 */
const handleDeleteMulti = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认删除?", "删除", {
    type: "error"
  })
  await processRequest.post(deleteMultiUrl(APIS.STAFF_BASE),
    selectData.map((item: any) => item.id))
  ElMessage.success("删除成功")
  handleRefresh()
}

/**
 * 启用 - 批量
 */
const handleEnable = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认启用?", "删除", {
    type: "error"
  })
  await processRequest.post(enableMultiUrl(APIS.STAFF_BASE),
    selectData.map((item: any) => item.id))
  ElMessage.success("启用成功")
  handleRefresh()
}

/**
 * 禁用 - 批量
 */
const handleDisable = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认禁用?", "删除", {
    type: "error"
  })
  await processRequest.post(disableMultiUrl(APIS.STAFF_BASE),
    selectData.map((item: any) => item.id))
  ElMessage.success("禁用成功")
  handleRefresh()
}

/**
 * 监听
 */
watch(() => props.nodeId, (newValue) => {
  if (newValue) {
    if (config.otherParams) {
      config.otherParams.departmentId = newValue
    }
    nextTick(() => {
      handleRefresh()
    })
  }
})
</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" @add="handleAdd" @delete="handleDelete" @disable="handleDisable"
    @edit="handleEdit" @enable="handleEnable" @delete-multi="handleDeleteMulti" />
</template>

<style lang="scss" scoped></style>